@import '../../style/mixin.scss';

.notice {
    min-height      : 100vh;
    background-color: #fff;

    .notice-top {
        @include flex();
        flex-direction  : column;
        padding-top     : 96px;
        background-color: #454A52;
        background-image: url(../../assets/img/notice-bg.png);

        h1 {
            @include font(48px, #fff);
            font-weight: 600;
        }

        p {
            @include font(14px, #fff);
        }

        a {
            @include font(14px, #3F90FA);
        }
    }

    .notice-main {
        background-color: #fff;
        padding-top     : 30px;
    }

    .notice-item {
        width        : 100%;
        padding      : 10px 20px;
        cursor       : pointer;
        border-bottom: 1px solid #eee;

        &:hover {
            box-shadow: 1px 1px 12px 1px rgb(0, 0, 0, .1);
        }

        h3 {
            @include font(18px, #0A0A0A);
        }

        p {
            @include font(12px, #808080);
        }
    }

    .pagination {
        margin: 30px 20px 90px;
    }
}

@media screen and (max-width:900px) {
    .notice {

        .notice-top {
            padding: 96px 30px 0;

            h1 {
                @include font(2rem, #fff);
                font-weight: 600;
            }
        }

        .notice-item {
            h3 {
                @include font(1rem, #0A0A0A);
            }

        }
    }
}